<template>
  <div class="bg-light">
    <div class="container-title">签约信息</div>
    <Form :rules="rule" ref="form" :model="form" class="store-info-item" style="display:flex;flex-wrap:wrap">
      <div style="flex:1;padding-left:30px;margin-right:10px">
        <FormItem label="门店名称: " prop="name">
          <p :class="sc.storeNameOrg?'font-pink':''">
            <Input class="mr" style="width:160px;" v-model="form.storeContractDTO.storeName" placeholder="更改门店名称" />
            <span v-if="sc.storeNameOrg">{{sc.storeNameOrg}} 更改为 {{sc.storeName}}</span>
          </p>
        </FormItem>
        <FormItem label="营业执照编号: " prop="name">
          <p :class="sc.businessLicenseNoOrg?'font-pink':''">
            <span v-if="sc.businessLicenseNoOrg">{{sc.businessLicenseNoOrg}} 更改为 </span> {{sc.businessLicenseNo}}
            <Button v-if="showJudge" type="primary" class="ml" size='small' @click="onConfirmNo">验证编号</Button>
            <Tag color="warning" v-show="isValideNo == 'success'">存在</Tag>
            <Tag color="success" v-show="isValideNo == 'fail'">不存在</Tag>
          </p>
        </FormItem>
        <FormItem label="经销商: " prop="name">
          <span :class="sc.distributorNameOrg?'font-pink':''"><span v-if="sc.distributorNameOrg">{{sc.distributorNameOrg}} 更改为 </span>{{sc.distributorName}}</span>
        </FormItem>
        <FormItem label="签约品牌: " prop="name">
          <p><span v-if="brandMain">
            <span :class="sc.brandNameOrg?'font-pink':''">
              <span v-if="sc.brandNameOrg">{{sc.brandNameOrg}} 更改为 </span> {{sc.brandName}}</span>
              <span v-if="brandGuanlian.length">(<span class="ml mr font-blue" v-for="i in brandGuanlian" :key='i.brandId'>{{i.brandName }}</span>)</span>
            </span>
          </p>
        </FormItem>
        <FormItem label="授权品牌绑定: " prop="name">
          <p><span class="ml font-blue" v-for="i in form.empowerBrandDTOList" :key='i.brandId'>{{i.brandName }}</span></p>
        </FormItem>
        <FormItem label="门店类型: " prop="name">
          <p :class="['fleft',sc.storeTypeNameOrg?'font-pink':'']">
            <SelectList
              class="mr"
              v-model="form.storeContractDTO.storeTypeId"
              listType="storeTypeList"
              @input="onChangeStoreType"
            />
            <span v-if="sc.storeTypeNameOrg">{{sc.storeTypeNameOrg}} 更改为 {{sc.storeTypeName}}</span>
          </p>
        </FormItem>
        <FormItem label="门店任务量: " prop="name">
          <p :class="['fleft', sc.storeTaskQuantityOrg?'font-pink':'']">
            <Input class="mr" style="width:160px;" v-model="form.storeContractDTO.storeTaskQuantity" placeholder="更改门店任务量" />
            <span v-if="sc.storeTaskQuantityOrg">{{sc.storeTaskQuantityOrg}} 更改为 {{sc.storeTaskQuantity}}</span>
          </p>
        </FormItem>
        <FormItem label="门头编号: " prop="name">
          <p :class="sc.storeNoOrg?'font-pink':''">
            <span v-if="sc.storeNoOrg">{{sc.storeNoOrg}} 更改为</span>
            {{sc.storeNo}}</p>
        </FormItem>
        <FormItem label="签约状态: ">
          <p :class="sc.contractStatusStrOrg?'font-pink':''">
            <span v-if="sc.contractStatusStrOrg">{{sc.contractStatusStrOrg}} 更改为</span>
            {{sc.contractStatusStr}}</p>
        </FormItem>
        <FormItem label="签约审核通过时间: " prop="name">
          <p>{{sc.enableDate}}</p>
        </FormItem>
        <FormItem label="备注信息: " class="fleft">
          <span>{{sc.memo}}</span>
          <!-- <Input type="textarea" placeholder="请输入备注，最多50个字" v-model="sc.memo" :maxlength="50" style="width:100% "/> -->
        </FormItem>
      </div>
      <div style="flex:1;padding-left:30px;margin-right:10px">
        <FormItem label="门店合同确认时间: " prop="name">
          <p>{{sc.storeContractAgreementDTO && sc.storeContractAgreementDTO.signConfirmDate}}</p>
        </FormItem>
        <FormItem label="门店维护人: " prop="name">
          <p :class="sc.salesmanNameOrg?'font-pink':''">
            <span v-if="sc.salesmanNameOrg">{{sc.salesmanNameOrg}} 更改为</span>
            {{sc.salesmanName}}</p>
        </FormItem>
        <FormItem label="所在区域: " prop="name">
          <p>{{(sc.provinceName || '')+ (sc.cityName || '') + (sc.areaName || '')}}</p>
        </FormItem>
        <FormItem label="详细地址: " prop="name">
          <p>{{sc.address}}</p>
        </FormItem>
        <FormItem label="坐标: " prop="name">
          <p>{{sc.lat}}-{{sc.lng}}</p>
        </FormItem>
        <FormItem label="门店联系人: " prop="name">
          <p>
            <Input class="mr" style="width:160px;" v-model="form.storeContractDTO.ownerName" placeholder="更改门店联系人名称" />
            <!-- <span>{{form.storeContractDTO.ownerName}}</span> -->
          </p>
        </FormItem>
        <FormItem label="店主生日: " prop="name">
          <p :class="sc.ownerBirthdayOrg?'font-pink':''">
            <span v-if="sc.ownerBirthdayOrg">{{sc.ownerBirthdayOrg}} 更改为</span>
            {{sc.ownerBirthday}}</p>
        </FormItem>
        <FormItem label="签约手机号: " prop="name">
          <p :class="sc.storePhoneOrg?'font-pink':''">
            <span v-if="sc.storePhoneOrg">{{sc.storePhoneOrg}} 更改为</span>
            {{sc.storePhone}}</p>
        </FormItem>
        <!-- <FormItem label="门店手机号: " prop="name">
          <p>{{sc.storePhone}}</p>
        </FormItem> -->
        <FormItem label="门店基金开关: ">
          <!-- <span>{{sc.isOpenFund?'开':'关'}}</span> -->
          <p :class="sc.isOpenFundOrg === true || sc.isOpenFundOrg === false?'font-pink':''">
            <span v-if="sc.isOpenFundOrg === true || sc.isOpenFundOrg === false">{{sc.isOpenFundOrg?'开':'关'}} 更改为</span>
            {{sc.isOpenFund?'开':'关'}}</p>
        </FormItem>
      </div>
      <div style="flex:1">
        <FormItem label="门店巡店开关: ">
          <p :class="sc.isOpenInspectionOrg === true || sc.isOpenInspectionOrg === false?'font-pink':''">
            <span v-if="sc.isOpenInspectionOrg === true || sc.isOpenInspectionOrg === false">{{sc.isOpenInspectionOrg?'开':'关'}} 更改为</span>
            {{sc.isOpenInspection?'开':'关'}}</p>
        </FormItem>
        <FormItem label="轮胎保理赔资格: " prop="name">
          <p :class="sc.isOpenProtectionClaimsOrg === true || sc.isOpenProtectionClaimsOrg === false?'font-pink':''">
            <span v-if="sc.isOpenProtectionClaimsOrg === true || sc.isOpenProtectionClaimsOrg === false">{{sc.isOpenProtectionClaimsOrg?'是':'否'}} 更改为</span>
            {{sc.isOpenProtectionClaims?'是':'否'}}</p>
        </FormItem>
        <FormItem label="授信账户: " prop="name">
          <p :class="sc.isOpenCreditAccountOrg === true || sc.isOpenCreditAccountOrg === false?'font-pink':''">
            <span v-if="sc.isOpenCreditAccountOrg === true || sc.isOpenCreditAccountOrg === false">{{sc.isOpenCreditAccountOrg?'是':'否'}} 更改为</span>
            {{sc.isOpenCreditAccount?'是':'否'}}</p>
        </FormItem>
        <FormItem label="门店月度进货返利最高条数: " prop="name">
          <p :class="sc.maxRebateQuantityOrg?'font-pink':''">
            <span v-if="sc.maxRebateQuantityOrg">{{sc.maxRebateQuantityOrg}} 更改为</span>
            {{sc.maxRebateQuantity}}</p>
        </FormItem>
        <FormItem label="门店进货积分最高条数: " prop="name">
          <p :class="sc.maxPurchaseQuantityIntegralOrg?'font-pink':''">
            <span v-if="sc.maxPurchaseQuantityIntegralOrg">{{sc.maxPurchaseQuantityIntegralOrg}} 更改为</span>
            {{sc.maxPurchaseQuantityIntegral}}</p>
        </FormItem>
        <FormItem label="门店基金单条轮胎系数: " prop="name">
          <p :class="sc.unitFundOrg?'font-pink':''">
            <span v-if="sc.unitFundOrg">{{sc.unitFundOrg}} 更改为</span>
            {{sc.unitFund}}</p>
        </FormItem>
        <FormItem label="门店基金核算最高条数: " prop="name">
          <p :class="sc.maxFundQuantityOrg?'font-pink':''">
            <span v-if="sc.maxFundQuantityOrg">{{sc.maxFundQuantityOrg}} 更改为</span>
            {{sc.maxFundQuantity}}</p>
        </FormItem>
        <FormItem label="入库返利有效天数设置(天): " prop="name">
          <p :class="sc.inRebateExpiredDaysOrg?'font-pink':''">
            <span v-if="sc.inRebateExpiredDaysOrg">{{sc.inRebateExpiredDaysOrg}} 更改为</span>
            {{sc.inRebateExpiredDays}}</p>
        </FormItem>
        <FormItem label="扫码定位距离设置（米）: " prop="name">
          <p :class="sc.scanDistanceRangeOrg?'font-pink':''">
            <span v-if="sc.scanDistanceRangeOrg">{{sc.scanDistanceRangeOrg}} 更改为</span>
            {{sc.scanDistanceRange}}</p>
        </FormItem>
      </div>
    </Form>
  </div>
</template>
<script>
  import AreaSelect from '@/components/AreaSelect';
  import AreaTree from '@/components/AreaTree';
  import ImageListUpload from '@/components/ImageListUpload';
  import PictureEditItem from "~/PictureEditItem";
  import SelectList from '@/components/SelectList';
  import { mapGetters } from 'vuex'
  export default {
    props: {
      form: {
        type: Object
      },
      showJudge: {
        type: Boolean,
        default: false
      },
      isOpen: {
        type: Boolean,
        default: null
      }
    },
    computed: {
      ...mapGetters(['storeTypeList']),
      sc() {
        return this.form.storeContractDTO || {}
      },
      brandMain() {
        return this.form.storeContractDTO.storeContractBrandDTOList.find(item => item.brandType == 0) || {}
      },
      brandGuanlian() {
        return this.form.storeContractDTO.storeContractBrandDTOList.filter(item => item.brandType == 1) || {}
      }
    },
    components: {
      AreaSelect,
      AreaTree,
      ImageListUpload,
      PictureEditItem,
      SelectList
    },
    data() {
      return {
        isValideNo: ''
      }
    },
    methods: {
      onConfirmNo() {
        let params = {
          businessLicenseNo: this.sc.businessLicenseNo,
          storeId: this.sc.storeId
        }
        this.$ajaxPost(`/store_contract_audit/audit/check_businessno`, params).then(res => {
          if (res) {
            this.isValideNo = 'success'
          } else {
            this.isValideNo = 'fail'
          }
        })
      },
      onChangeStoreType(v) {
        let item = this.storeTypeList.find(item => item.value === v) || {}
        this.form.storeContractDTO.storeTypeId = v
        this.form.storeContractDTO.storeTypeName = item.text
      }
    },
  }
</script>
